<!-- 失物招领页面 -->
<template>
	<view id="body" @touchstart="start" @touchend="end">
		<!-- 搜索 -->
		<view class="search"> 
			<u-search placeholder="请输入搜索内容" v-model="keyword" :showAction="false" @search="search"></u-search>
		</view>
		<!-- 导航条 -->
		<view class="nav">
			<!-- 类型详细分类 -->
			<view class="type">
				<u-tabs :list="type" @click="fl" lineColor="#8ab0d4":inactiveStyle="{fontSize:'28rpx',}" :activeStyle="{fontSize:'28rpx'}"></u-tabs>
			</view>
			<!-- 订单所属类型 -->
			<view class="ordertype">
				<text class="left" @click="btchlik" :class="ordertype ? 'leftbk':'rightbk'">失物招领</text>
				<text class="right"@click="btchlik" :class="!ordertype ? 'leftbk':'rightbk'" >寻物启事</text>
			</view>
		</view>
		<!-- 订单列表 --> 
		<view class="order">
			<!-- 左侧内容 --> 
			<view class="order-card-left">
				<view class="order-card" v-for="(item,index) in orderListleft" :key="index" @click="orderleftclick(index)">
					<view class="orderimg" v-if="item.indexImg != 0">
						<image :src="item.indexImg" class="img" v-if="item.indexImg != 0" ></image>
					</view>
					<view class="order-conent">
						<view class="title">
							<text>{{item.title}}</text>
						</view>
						<view class="type">
							<text>类型:</text>
							<text>{{type[item.type - 1].name}}</text>
						</view>
					</view>
					<!-- 发布订单用户信息 -->
					<view class="order-user">
						<view class="username">
							<text>{{item.issueUserName}}</text>
						</view>
						<view class="date">
							<text>{{item.createTime}}</text>
						</view>
						<view class="userimg">
							<u-avatar :src="item.issueUserImg" size="50rpx"></u-avatar>
						</view>
					</view>
					<!-- 认领按钮 -->
					<view class="order-button">
						<text v-if="typenum<4">{{buttontext}}</text>
						<text v-if="typenum==4">{{stateLeft[index]}}</text>
					</view>
				</view>
			</view>
			<!-- 右侧列表 -->
			<view class="order-card-right">
				<view class="order-card" v-for="(item,index) in orderListright" :key="index" @click="orderrightclick(index)">
					<view class="orderimg" v-if="item.indexImg != 0">
						<image :src="item.indexImg" class="img" v-if="item.indexImg != 0" ></image>
					</view>
					<view class="order-conent">
						<view class="title">
							<text>{{item.title}}</text>
						</view>
						<view class="type">
							<text>类型:</text>
							<text>{{type[item.type - 1].name}}</text>
						</view>
					</view>
					<!-- 发布订单用户信息 -->
					<view class="order-user">
						<view class="username">
							<text>{{item.issueUserName}}</text>
						</view>
						<view class="date">
							<text>{{item.createTime}}</text>
						</view>
						<view class="userimg">
							<u-avatar :src="item.issueUserImg" size="50rpx"></u-avatar>
						</view>
					</view>
					<!-- 认领按钮 -->
					<view class="order-button">
						<text v-if="typenum<4">{{buttontext}}</text>
						<text v-if="typenum==4">{{stateRight[index]}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 订单底部加载 -->
		<view class="loading" >
			<u-loadmore :status="status" :line="line" :nomoreText="nomoreText" /> 
		</view>
		<!-- 右侧发布标签 -->
		<view class="tb" v-show="tb"></view>
		<view class="bottom" :class="flag ? 'left1':'right1'">
			<text class="t-icon t-icon-zengjia" style="width: 96rpx;height: 96rpx;" @click="addorder" ></text>
		</view>
	</view>
</template>

<script>
	import {http} from "../static/service/requestAddress/rtas.js"
	export default {
		data() {
			return {
				keyword:"",
				ordertype:true,//订单所属类型样式控制变量
				oldList:[],
				classify:[
						{
							name: '失物招领',
							url:http+"lostarticle/",
							page:0,
						}, 
						{
						    name: '寻物启事',
							url:http+"seekarticle/",
							page:0,
						},
					],
				type:[
					{
						name:"电子产品",
					},
					{
						name:"生活用品",
					},
					{
						name:"学习用品",
					},
					{
						name:"其他",
					},
					{
						name:"我的",
					},
				],
				keyword:"",//搜索内容
				clientX:'',
				flag:false, 
				tb:true,
				orderListleft:[],//左侧订单列表
				orderListright:[],//右侧订单列表
				status:"loading",
				state:"",
				line:true,
				nomoreText:"没有更多了",
				num:0,//切换失物招领内容对应的下标 
				typenum:0,//切换订单类型下标
				buttontext:"认领",//订单的认领按钮
				ss:false,//是否是搜索标记
				ssnum:0,//搜索分页下标
				sskey:"",//上一次搜索的key
				stateLeft:[],//左边状态
				stateRight:[],//右边状态
			}
		},
		created() {
			//获取数据
			uni.request({
				url:http+"lostarticle/"+0+"/"+0,  
				method:"GET",
				complete:(res) =>{
					if(res.data.code == 20021){
						console.log("获取的数据是："+ JSON.stringify(res.data.date))
						if(res.data.date == null){
							this.status = "nomore"
						}else{
						this.oldList = res.data.date //将获取的数据存入旧数据的集合
						var datalist = res.data.date
						for(var i = 0; i < datalist.length;i++){
							var L = this.orderListleft.length
							var R = this.orderListright.length
							//对时间处理
							datalist[i].createTime = (datalist[i].createTime).substring(0,datalist[i].createTime.lastIndexOf(":"))
							//分流
							if(L == R ){
								this.orderListleft.push(datalist[i])
							}else{
								this.orderListright.push(datalist[i])
							}
						}
						this.status = "nomore"
						//增加分页值
						this.classify[this.num].page = this.classify[this.num].page+1
					}
					}else{
						uni.$u.toast("获取数据失败!")
					}
				}
			})
		},
		//上拉加载
		onReachBottom() {
			console.log("触发了上拉加载")
			this.status = "loading"
			var url = ""
			if(this.typenum<4){
			// 是搜索的下拉分页的情况
			if(this.ss){
				url = this.classify[this.num].url +"search/"+this.keyword+"/"+this.typenum+"/"+this.ssnum
			}else{
				url = this.classify[this.num].url+this.typenum+"/"+this.classify[this.num].page
			}
			uni.request({
				url:url,
				method:"GET",
				complete:(res) =>{
					if(res.data.code == 20021){
						if(res.data.date == "" & res.data.date.length <= 0){
							uni.$u.toast("没有更多了!")
						}
						this.oldList = this.oldList.concat(res.data.date) //将获取的数据存入旧数据的集合
						var datalist = res.data.date
						for(var i = 0; i < datalist.length;i++){
							var L = this.orderListleft.length
							var R = this.orderListright.length
							//对时间处理
							datalist[i].createTime = (datalist[i].createTime).substring(0,datalist[i].createTime.lastIndexOf(":"))
							//分流
							if(L == R ){
								this.orderListleft.push(datalist[i])
							}else{
								this.orderListright.push(datalist[i])
							}
						}
						this.status = "nomore"
						if(this.ss){
							this.ssnum += 1
						}else{
							//增加分页值
							if(res.data.date != null & res.data.date.length > 0){
								this.classify[this.num].page = this.classify[this.num].page+1
							}
						}
					}else{
						uni.$u.toast("获取数据失败!")
					}
				}
			})
			}else{
				var user = JSON.parse(uni.getStorageSync('user'))
				// 是搜索的下拉分页的情况
				if(this.ss){
					url = this.classify[this.num].url +"search/"+this.keyword+"/"+user.id+"/"+this.ssnum+"/2"
				}else{
					url = this.classify[this.num].url+user.id+"/"+this.classify[this.num].page+"/2"
				}
				uni.request({
					url:url,
					method:"GET",
					complete:(res) =>{
						if(res.data.code == 20021){
							if(res.data.date == "" & res.data.date.length <= 0){
								uni.$u.toast("没有更多了!")
							}
							this.oldList = this.oldList.concat(res.data.date) //将获取的数据存入旧数据的集合
							var datalist = res.data.date
							for(var i = 0; i < datalist.length;i++){
								var L = this.orderListleft.length
								var R = this.orderListright.length
								//对时间处理
								datalist[i].createTime = (datalist[i].createTime).substring(0,datalist[i].createTime.lastIndexOf(":"))
								//分流
								if(L == R ){
									this.orderListleft.push(datalist[i])
								}else{
									this.orderListright.push(datalist[i])
								}
							}
							this.status = "nomore"
							if(this.ss){
								this.ssnum += 1
							}else{
								//增加分页值
								if(res.data.date != null & res.data.date.length > 0){
									this.classify[this.num].page = this.classify[this.num].page+1
								}
							}
						}else{
							uni.$u.toast("获取数据失败!")
						}
					}
				})
			}
		},
		methods:{
			//搜索功能
			search(){ 
				if(this.typenum<4){
				if(this.keyword == "" ){
					uni.$u.toast("搜索内容不能为空")
					return
				}
				this.orderListleft = []
				this.orderListright = []
				this.oldList = []
				this.status = "loading"
				if(!this.ss){ 
					this.ss = true
				}
				//搜索内容不同时，重置页数
				if(this.keyword != this.sskey){
					this.sskey =this.keyword
					this.ssnum = 0
				}
				 uni.request({
					 url:this.classify[this.num].url +"search/"+this.keyword+"/"+this.typenum +"/"+ this.ssnum,
					 	method:"GET",
					 	complete:(res) =>{
					 		if(res.data.code == 20021){
					 			console.log("获取的数据是："+ JSON.stringify(res.data.date))
					 			if(res.data.date == null){
					 				this.status = "nomore"
					 			}else{
									this.oldList = this.oldList.concat(res.data.date) //将获取的数据存入旧数据的集合
									var datalist = res.data.date
									for(var i = 0; i < datalist.length;i++){
										var L = this.orderListleft.length
										var R = this.orderListright.length
										//对时间处理
										datalist[i].createTime = (datalist[i].createTime).substring(0,datalist[i].createTime.lastIndexOf(":"))
										//分流
										if(L == R ){
											this.orderListleft.push(datalist[i])
										}else{
											this.orderListright.push(datalist[i])
										}
									}
									this.status = "nomore"
									//增加分页值
									this.ssnum += 1
								}
					 		}else{
					 			uni.$u.toast("获取数据失败!")
					 		}
					 	}
					 })
					 }else{
						 var user = JSON.parse(uni.getStorageSync('user'))
						 if(this.keyword == "" ){
						 	uni.$u.toast("搜索内容不能为空")
						 	return
						 }
						 this.orderListleft = []
						 this.orderListright = []
						 this.stateLeft = []
						 this.stateRight = []
						 this.oldList = []
						 this.status = "loading"
						 if(!this.ss){ 
						 	this.ss = true
						 }
						 //搜索内容不同时，重置页数
						 if(this.keyword != this.sskey){
						 	this.sskey =this.keyword
						 	this.ssnum = 0
						 }
						 console.log("是："+this.classify[this.num].url +"search/"+this.keyword+"/"+user.id +"/"+ this.ssnum+"/2")
						  uni.request({
						 	 url:this.classify[this.num].url +"search/"+this.keyword+"/"+user.id +"/"+ this.ssnum+"/2",
						 	 	method:"GET",
						 	 	complete:(res) =>{
						 	 		if(res.data.code == 20021){
						 	 			console.log("获取的数据是："+ JSON.stringify(res.data.date))
						 	 			if(res.data.date == null){
						 	 				this.status = "nomore"
						 	 			}else{
						 					this.oldList = this.oldList.concat(res.data.date) //将获取的数据存入旧数据的集合
						 					var datalist = res.data.date
						 					for(var i = 0; i < datalist.length;i++){
												if(this.classify[this.num].name=="失物招领"&&datalist[i].state == 0){
													this.buttontext = "待认领"
												}else if(this.classify[this.num].name=="失物招领"&&datalist[i].state == 1){
													this.buttontext = "认领中"
												}else if(this.classify[this.num].name=="失物招领"&&datalist[i].state == 2){
													this.buttontext = "已认领"
												}else if(this.classify[this.num].name=="寻物启事"&&datalist[i].state == 0){
													this.buttontext = "待归还"
												}else if(this.classify[this.num].name=="寻物启事"&&datalist[i].state == 1){
													this.buttontext = "归还中"
													}else if(this.classify[this.num].name=="寻物启事"&&datalist[i].state == 2){
													this.buttontext = "已归还"
													}
						 						var L = this.orderListleft.length
						 						var R = this.orderListright.length
						 						//对时间处理
						 						datalist[i].createTime = (datalist[i].createTime).substring(0,datalist[i].createTime.lastIndexOf(":"))
						 						//分流
						 						if(L == R ){
						 							this.orderListleft.push(datalist[i])
													this.stateLeft.push(this.buttontext)
						 						}else{
						 							this.orderListright.push(datalist[i])
													this.stateRight.push(this.buttontext)
						 						}
						 					}
						 					this.status = "nomore"
						 					//增加分页值
						 					this.ssnum += 1
						 				}
						 	 		}else{
						 	 			uni.$u.toast("获取数据失败!")
						 	 		}
						 	 	}
						 	 })
					 }
			 },
			//订单所属类型
			btchlik(){
				this.ordertype = ! this.ordertype
				if( this.ordertype == false){
					this.num = 1
					this.buttontext = "归还"
				}else{
					this.num = 0
					
					this.buttontext = "认领"
					}
				//获取数据
				//发送请求
				if(this.typenum<4){
				this.orderListleft = []
				this.orderListright = []
				this.status = "loading"
				this.ss = false
				this.ssnum = 0
				uni.request({
					url:this.classify[this.num].url+this.typenum+"/0",
					method:"GET",
					complete:(res) =>{
						if(res.data.code == 20021){
						//	console.log("获取的数据是："+ JSON.stringify(res.data.date))
							if(res.data.date == null){
								this.status = "nomore"
								uni.$u.toast("没有更多了!")
							}else{
							this.oldList = res.data.date //将获取的数据存入旧数据的集合
							var datalist = res.data.date
							for(var i = 0; i < datalist.length;i++){
								var L = this.orderListleft.length
								var R = this.orderListright.length
								//对时间处理
								datalist[i].createTime = (datalist[i].createTime).substring(0,datalist[i].createTime.lastIndexOf(":"))
								//分流
								if(L == R ){
									this.orderListleft.push(datalist[i])
								}else{
									this.orderListright.push(datalist[i])
								}
							}
							this.status = "nomore"
						}
						}else{
							uni.$u.toast("获取数据失败!")
						}
					}
				})
				}else{
					//发送请求
					this.orderListleft = []
					this.orderListright = []
					this.stateLeft = []
					this.stateRight = []
					this.status = "loading"
					this.ss = false
					this.ssnum = 0
					var user = JSON.parse(uni.getStorageSync('user'))
					console.log("是："+this.classify[this.num].url+user.id+"/0/1")
					uni.request({
						url:this.classify[this.num].url+user.id+"/0/1",
						method:"GET",
						complete:(res) =>{
							if(res.data.code == 20021){
								console.log("获取的数据是："+JSON.stringify(res.data.date))
								if(res.data.date == null){
									this.status = "nomore"
									uni.$u.toast("没有更多了!")
								}else{
								this.oldList = res.data.date //将获取的数据存入旧数据的集合
								var datalist = res.data.date
								for(var i = 0; i < datalist.length;i++){
									console.log("shi:"+datalist[i].state)
									if(this.classify[this.num].name=="失物招领"&&datalist[i].state == 0){
										this.buttontext = "待认领"
									}else if(this.classify[this.num].name=="失物招领"&&datalist[i].state == 1){
										this.buttontext = "认领中"
									}else if(this.classify[this.num].name=="失物招领"&&datalist[i].state == 2){
										this.buttontext = "已认领"
									}else if(this.classify[this.num].name=="寻物启事"&&datalist[i].state == 0){
										this.buttontext = "待归还"
									}else if(this.classify[this.num].name=="寻物启事"&&datalist[i].state == 1){
										this.buttontext = "归还中"
										}else if(this.classify[this.num].name=="寻物启事"&&datalist[i].state == 2){
										this.buttontext = "已归还"
										}
									var L = this.orderListleft.length
									var R = this.orderListright.length
									//对时间处理
									datalist[i].createTime = (datalist[i].createTime).substring(0,datalist[i].createTime.lastIndexOf(":"))
									//分流
									if(L == R ){
										this.orderListleft.push(datalist[i])
										this.stateLeft.push(this.buttontext)
									}else{
										this.orderListright.push(datalist[i])
										this.stateRight.push(this.buttontext)
									}
								}
								this.status = "nomore"
								//重置分页值
								this.classify[this.num].page = 1
							}
							}else{
								uni.$u.toast("获取数据失败!")
							}
						}
					})
				}
			},
			fl(itme){ //订单类型点击按钮（电子产品。。。）
			if(itme.index == 4){
				//发送请求
				this.orderListleft = []
				this.orderListright = []
				this.stateLeft = []
				this.stateRight = []
				this.status = "loading"
				this.typenum = itme.index
				this.ss = false
				this.ssnum = 0
				var user = JSON.parse(uni.getStorageSync('user'))
				console.log("是："+this.classify[this.num].url+user.id+"/0/1")
				uni.request({
					url:this.classify[this.num].url+user.id+"/0/1",
					method:"GET",
					complete:(res) =>{
						if(res.data.code == 20021){
							console.log("获取的数据是："+JSON.stringify(res.data.date))
							if(res.data.date == null){
								this.status = "nomore"
								uni.$u.toast("没有更多了!")
							}else{
							this.oldList = res.data.date //将获取的数据存入旧数据的集合
							var datalist = res.data.date
							for(var i = 0; i < datalist.length;i++){
								console.log("pp:"+datalist[i].state+"999"+this.classify[this.num].name)
								if(this.classify[this.num].name=="失物招领"&&datalist[i].state == 0){
									this.buttontext = "待认领"
								}else if(this.classify[this.num].name=="失物招领"&&datalist[i].state == 1){
									this.buttontext = "认领中"
								}else if(this.classify[this.num].name=="失物招领"&&datalist[i].state == 2){
									this.buttontext = "已认领"
								}else if(this.classify[this.num].name=="寻物启事"&&datalist[i].state == 0){
									this.buttontext = "待归还"
								}else if(this.classify[this.num].name=="寻物启事"&&datalist[i].state == 1){
									this.buttontext = "归还中"
								}else if(this.classify[this.num].name=="寻物启事"&&datalist[i].state == 2){
									this.buttontext = "已归还"
								}
								var L = this.orderListleft.length
								var R = this.orderListright.length
								//对时间处理
								datalist[i].createTime = (datalist[i].createTime).substring(0,datalist[i].createTime.lastIndexOf(":"))
								//分流
								if(L == R ){
									this.orderListleft.push(datalist[i])
									this.stateLeft.push(this.buttontext)
								}else{
									this.orderListright.push(datalist[i])
									this.stateRight.push(this.buttontext)
								}
							}
							this.status = "nomore"
							//重置分页值
							this.classify[this.num].page = 1
						}
						}else{
							uni.$u.toast("获取数据失败!")
						}
					}
				})
			}else{
				//发送请求
				if(this.classify[this.num].name=="失物招领"){
					this.buttontext = "认领"
				}else if(this.classify[this.num].name=="寻物启事"){
					this.buttontext = "归还"
				}
				this.orderListleft = []
				this.orderListright = []
				this.status = "loading"
				this.typenum = itme.index
				this.ss = false
				this.ssnum = 0
				uni.request({
					url:this.classify[this.num].url+itme.index+"/0",
					method:"GET",
					complete:(res) =>{
						if(res.data.code == 20021){
							console.log("获取的数据是："+JSON.stringify(res.data.date))
							if(res.data.date == null){
								this.status = "nomore"
								uni.$u.toast("没有更多了!")
							}else{
							this.oldList = res.data.date //将获取的数据存入旧数据的集合
							var datalist = res.data.date
							for(var i = 0; i < datalist.length;i++){
								var L = this.orderListleft.length
								var R = this.orderListright.length
								//对时间处理
								datalist[i].createTime = (datalist[i].createTime).substring(0,datalist[i].createTime.lastIndexOf(":"))
								//分流
								if(L == R ){
									this.orderListleft.push(datalist[i])
								}else{
									this.orderListright.push(datalist[i])
								}
							}
							this.status = "nomore"
							//重置分页值
							this.classify[this.num].page = 1
						}
						}else{
							uni.$u.toast("获取数据失败!")
						}
					}
				})
				}
			},
			// 增加订单
			addorder(){
				uni.navigateTo({
					url:"/shiwuzhaoling/swzlAddOrder"
				})
				console.log("点击了增加订单按钮")
			},
			//订单点击事件
			orderleftclick(index){  
				var id = this.orderListleft[index].id
				for(var i = 0;i<this.oldList.length;i++){
					if(this.oldList[i].id == id){
						uni.navigateTo({
							url:"/shiwuzhaoling/swzlOrderInfo?data="+ JSON.stringify(this.oldList[i])
						})
					}
				}
			},
			orderrightclick(index){
				var id = this.orderListright[index].id
				for(var i = 0;i<this.oldList.length;i++){
					if(this.oldList[i].id == id){
						uni.navigateTo({
							url:"/shiwuzhaoling/swzlOrderInfo?data="+ JSON.stringify(this.oldList[i])
						})
					}
				}
			},
			start(e){
			    this.clientX=e.changedTouches[0].clientX;   
			},
			end(e){
				const T = e.changedTouches[0].clientX-this.clientX
				if(T < 0){ 
					this.tb = false
					this.flag = true
				}
				if(T > 0 ){
					this.flag = false
					setTimeout(()=>{
						this.tb = true
					},100)
				}
			}
		}
	}
</script> 

<style scoped>
	@import url("../static/css/componentsCss/shiwuzhaoling/swzlindex.css");
	.left1{
		position: fixed;
		right: 8rpx; 
		bottom: 16%; 
		transition: all 0.5s; 
	}
	.right1{
		position: fixed;
		right: -96rpx;
		bottom: 16%;
		transition: all 0.5s; 
		opacity: 0;
	}
</style>